<template>
  <el-dialog title="新增线索" :visible.sync="dialogVisible">
    <div class="clue-submit">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="small"
        label-width="100px"
        label-position="top"
      >
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="线索名称" prop="clueName">
              <el-input
                v-model="formData.clueName"
                placeholder="请输入线索名称"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="征集方式" prop="way">
              <el-input
                v-model="formData.way"
                placeholder="请输入征集方式"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="线索来源" prop="sourceCome">
              <el-input
                v-model="formData.sourceCome"
                placeholder="请输入线索来源"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="分类" prop="sortId">
              <el-select
                v-model="formData.sortId"
                placeholder="请输入分类"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in sortList"
                  :key="index"
                  :label="item.sortName"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年代" prop="yearId">
              <el-select
                v-model="formData.yearId"
                placeholder="请选择年代"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in yearList"
                  :key="index"
                  :label="item.yearName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="等级" prop="gradeId">
              <el-select
                v-model="formData.gradeId"
                placeholder="请选择等级"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in gradeList"
                  :key="index"
                  :label="item.gradeName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="发现日期" prop="findTime">
              <el-date-picker
                v-model="formData.findTime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="请选择发现日期"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报价(元）" prop="price">
              <el-input
                v-model="formData.price"
                placeholder="请输入报价(元）"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="征集人" prop="userName">
              <el-input
                v-model="formData.userName"
                placeholder="请输入征集人"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="relativeName">
              <el-input
                v-model="formData.relativeName"
                placeholder="请输入联系人"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="身份证号" prop="userIdCard">
              <el-input
                v-model="formData.userIdCard"
                placeholder="请输入身份证号"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="relativePhone">
              <el-input
                v-model="formData.relativePhone"
                placeholder="请输入联系电话"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="鉴选描述" prop="identifyDesc">
              <el-input
                v-model="formData.identifyDesc"
                type="textarea"
                placeholder="请输入鉴选描述"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="线索描述" prop="clueDesc">
              <el-input
                v-model="formData.clueDesc"
                type="textarea"
                placeholder="请输入线索描述"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item size="medium">
          <el-row :gutter="15">
            <el-col :span="12">
              <el-button class="btn" type="primary" @click="submitForm">
                提交
              </el-button>
            </el-col>
            <el-col :span="12">
              <el-button class="btn" type="info" @click="resetForm">
                重置
              </el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
import { addClue } from '@/api/clue/clue-1';
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        way: '',
        sourceCome: '',
        clueName: '',
        sortId: null,
        yearId: null,
        gradeId: null,
        price: null,
        findTime: null,
        userName: '',
        relativeName: '',
        userIdCard: '',
        relativePhone: '',
        identifyDesc: '',
        clueDesc: ''
      },
      rules: {
        way: [],
        sourceCome: [],
        clueName: [],
        sortId: [
          {
            required: true,
            message: '此项必填',
            trigger: 'blur'
          }
        ],
        yearId: [
          {
            required: true,
            message: '此项必填',
            trigger: 'blur'
          }
        ],
        gradeId: [
          {
            required: true,
            message: '此项必填',
            trigger: 'blur'
          }
        ],
        price: [],
        findTime: [],
        userName: [],
        relativeName: [],
        userIdCard: [],
        relativePhone: [],
        identifyDesc: [],
        clueDesc: []
      }
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.$parent.dialogAddVisible;
      },
      set(v) {
        this.$parent.dialogAddVisible = v;
      }
    },
    gradeList() {
      return this.$parent.gradeList;
    },
    sortList() {
      return this.$parent.sortList;
    },
    yearList() {
      return this.$parent.yearList;
    }
  },
  created() {},
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(async valid => {
        if (!valid) return;
        console.log('提交添加线索表单', this.formData);
        const { data: res } = await addClue(this.formData);
        console.log('api=提交添加线索', res);
        if (res.code === 200) {
          this.$message.success('新增线索成功');
          this.dialogVisible = false;
          // this.resetForm();
          this.$parent.getAllClue();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    resetForm() {
      this.$refs['elForm'].resetFields();
    }
  }
};
</script>
<style lang="scss" scoped>
.clue-submit {
  .btn {
    width: 100%;
  }
}
</style>
